<template>
  <div id="app-container">
    <router-view/>
  </div>
</template>

<script>
import {onMounted, provide, ref} from "vue";

export default {
  name: 'App',

  setup() {
    // 1. 使用 ref 创建一个响应式的数据
    const currentReaderId = ref(null);

    // 2. 将这个响应式数据 provide 给所有后代组件
    //    第一个参数是 key (字符串)，第二个参数是数据
    provide('readerId', currentReaderId);

    // 3. 在组件挂载后，从 URL 获取 ID 并更新 ref 的值
    onMounted(() => {
      const urlParams = new URLSearchParams(window.location.search);
      const readerId = urlParams.get('readerId');

      if (readerId) {
        currentReaderId.value = readerId;
        console.log(currentReaderId);
      }
    });

    // setup 函数需要返回数据，才能在模板中使用（虽然这里没用）
    return {
      currentReaderId
    };
  }
};
</script>

<style>

</style>
